<template>
	<view>
		<!-- 沉浸式导航占位 -->
		<!-- <view class="status_bar"></view> -->
		<u-navbar title="付费"
			:autoBack="true"
			:border-bottom="false"
			back-icon-color="#fff" 
			title-color="#fff"
			:background="background" />
		<div class="top-wrap">
			￥{{price}}
		</div>
		<view class="pay-type">
			<view class="head">选择支付方式</view>
			<view class="cell" v-for="(item,index) in payType" :key="index"
			 @tap="radioClick(item.name)">
				<view class="label">
					<image class="label-icon" :src="item.icon"></image>
					{{item.name}}
				</view>
				<image class="radio" :src="item.name==value?'/static/images/pay/selected.png':'/static/images/pay/select.png'"></image>
			</view>
			<view class="tips" v-if="!userInfo.pay_pwd && value === '余额支付'" @click="tippage()">未设置支付密码, 去设置！</view>
		</view>
		
		<view class="btn-bottom" @click="surePays()">确认支付</view>
		<payKeyboard v-if="showKeyBoard" title="支付安全键盘"
		@success="enterSuccess" @close="close"
		@forget="forgetPsd"
		></payKeyboard>
	</view>
</template>

<script>
	import {aliPay, balancePay, wxPay} from './request.js'
	import {applyActivity} from "@/common/config/request.js"
	import {
		getUserInfo
	} from "@/common/config/request.js"
	import payKeyboard from './mi-payKeyboard.vue'
	export default {
		components: {
			payKeyboard
		},
		data() {
			return {
				background: {
					backgroundColor: '#FD9706',
				},
				form:'',
				payType: [{
						name: '微信支付',
						icon:'/static/images/pay/wx.png',
						disabled: false
					},
					{
						name: '支付宝支付',
						icon:'/static/images/pay/ali.png',
					},
					// {
					// 	name: '银行卡支付',
					// 	icon:'/static/images/pay/card.png',
					// }, 
					// {
					// 	name: '余额支付',
					// 	icon:'/static/images/pay/wallet.png',
					// }
				],
				value: '微信支付',
				orderId: '',
				price: '',
				showKeyBoard: false,
				payPsd: '',
				userInfo: {},
				type:'',
				cartid:"",
				id:""
			};
		},
		onShow() {
			this.getUser()
		},
		onLoad(option) {
			this.id=option.id
			this.type=option.type?option.type:''
			this.cartid=option.cartid?option.cartid:''
			// console.log(option,'option.form',JSON.parse(this.cartid).uid)
			this.orderId = option.orderId
			this.price = option.price
			this.form=option.form
		},
		methods: {
			getUser () {
				getUserInfo({}).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						this.userInfo = res.data.data
					}
				})
			},
			radioClick(value) {
				this.value = value
			},
			confirm() {
				let params = {
					order_no: this.orderId
				}
				// console.
				switch (this.value) {
					case '微信支付':
					wxPay(params).then(res => {
						console.log(res.data)
						this.wxPay(res.data)
					})
						
					break
					case '支付宝支付':
						console.log(this.orderId)
						aliPay(params).then(res => {
							// console.log(res)
							this.aliPay(res.data)
						})
						
					break
					case '余额支付':
					this.showKeyBoard = false
					params.pay_pwd = this.payPsd
					balancePay(params).then(res => {
						console.log(res)
						if (res.data.code === 1) {
							uni.showToast({
								title: '支付成功！',
								icon:'success',
								duration: 2000
							})
							applyActivity({push_id:this.id}).then((res)=>{
								// console.log(res,'33222')
								if(res.data.code==1){
									// uni.showToast({
									// 	icon:'none',
									// 	title:'报名成功'
									// })
									// this.articleInfo.is_apply=1
									setTimeout(()=>{
										uni.navigateBack({
											
										})
									},500)
								}
							})
							// setTimeout(()=>{
							// 	if(this.form){
							// 		uni.redirectTo({
							// 			url:'/pages/Search/Search?pay=payok&form='+this.form+'&orderId='+this.orderId
							// 		})
							// 	}
								
							// 	if(this.type=='cart'){
							// 		uni.redirectTo({
							// 			url:'/pages/TUI-Chat/chat?conversationID=C2C'+ JSON.parse(this.cartid).uid
							// 		})
							// 		// uni.redirectTo({
							// 		// 	url:''
							// 		// })
							// 	}
								
							// 	if(this.type=='xuyuan'){
							// 		let index=-1
							// 		uni.redirectTo({
							// 			url:'/pages/myorder/myorder?type=' + index
							// 		})
							// 	}
							// },500)
							
							
							// uni.navigateBack()
						}
					})
					break
					default:
					break
				}
			},
			wxPay(info) {
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: JSON.stringify({
					appid:info.appid,
					noncestr:info.noncestr,
					package:info.package,
					partnerid:info.partnerid,
					prepayid: info.prepayid,
					timestamp:info.timestamp, 
					sign: info.sign}),
					success: (ret) => {
						console.log(ret)
						console.log('成功')
					},
					fail: (err) => {
						console.log(err)
						console.log('失败')
					},
					complete: (ss) => {
						console.log(this.orderId)
					}
				})
			},
			aliPay (payInfo) {
				// console.log(payInfo)
				let info = payInfo.replace(/^\s*|\s*$/g,"")
				// console.log(info)
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: info,
				    success: (e) => {
						console.log(e)
						console.log('成功')
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 2000
						})
						uni.navigateBack()
				    },
				    fail: (e) => {
				      console.log(e)
				      console.log('失败')
				    },
				    complete: () => {
				      console.log(this.orderId)
				    }
				})
			},
			// 键盘输入成功
			enterSuccess (e) {
				console.log(e)
				this.payPsd = e
				this.confirm()
			},
			close () {
				console.log('关闭键盘')
				this.showKeyBoard = false
			},
			// 忘记密码
			forgetPsd () {
				this.showKeyBoard = false
				uni.navigateTo({
					url: '/pages/set/message/message?title=修改支付密码&type=2'
				})
			},
			surePays () {
				if (this.value === '余额支付') {
					 this.showKeyBoard = true
				} else {
					this.confirm()
				}
			},
			tippage () {
				uni.navigateTo({
					url: '/pages/set/message/message?title=修改支付密码&type=2'
				})
			}
		}
	}
</script>

<style lang="less"
	scoped>
	.top-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 339rpx;
		background: linear-gradient(180deg, #FD9706 0%, #FBB414 100%);
		font-size: 46px;
		color: #FFFFFF;
	}
	.head{
		font-size: 32rpx;
		padding: 30rpx;
	}
	.cell{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 18rpx 30rpx;
		
		.label{
			font-size: 30rpx;
			display: flex;
			align-items: center;
			flex: 1;
		}
		.label-icon{
			width: 70rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
		.radio{
			width: 44rpx;
			height: 44rpx;
		}
	}
	.btn-bottom{
		width: 702rpx;
		text-align: center;
		font-size: 36rpx;
		line-height: 98rpx;
		height: 98rpx;
		background: #FA9700;
		color: #fff;
		border-radius: 300px;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		transform: translateX(-50%);
		
	}
</style>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.tips{
		text-align: center;
	}
</style>